<template>
	<view class="content" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="title">
			<u-icon name="arrow-left" color="#FFFFFF" size="36" @tap="nextPage(`/pages/publish/publish?type=big`)"></u-icon>
			<text>学生实践</text>
		</view>
		<view class="main">
			<view class="logo">
				<image src="/static/publishPractice/logo1.png" mode=""></image>
			</view>
			<view class="detail">
				<view class="detailTitle">
					<text>请选择您要找的实践牛人</text>
				</view>
				<view class="detailName" v-for="(item,index) in List1" :key='index'>
					<view class="detailNameLeft">
						<text class="light">{{item.name}}</text>
						<input type="text"  :placeholder="item.input"
						placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}"
						value="" />
					</view>
					<u-icon name="close-circle" color="#384B8B" size="28"></u-icon>
				</view>
			</view>
			<view class="jobAddress" v-for="(item,index) in List2" :key='index'>
				<view class="jobAddressLeft">
					<text class="light">{{item.name}}</text>
					<input type="text"  :placeholder="item.input"
					placeholder-style="{
						width: 350px;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #283D82;
					}"
					value="" />
				</view>
				<u-icon name="close-circle" color="#384B8B" size="28"></u-icon>
			</view>
			<view class="buttom">
				<button type="default">确认发布</button>
			</view>
		</view>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/publishPractice/bg1.png"
	export default {
		data() {
			return {
				indexBackgroundImage: indexBackgroundImage,
				List1:[
					{
						name:'请填写职位名称',
						input:'某某某职位'
					},
					{
						name:'请填写职能',
						input:'某某某职能'
					},
					{
						name:'学历要求',
						input:'某某某学历'
					},
					{
						name:'薪资待遇',
						input:'请输入薪资范围'
					},
					{
						name:'职位描述',
						input:'请填写职位描述'
					}
				],
				List2:[
					{
						name:'工作地点',
						input:'钱塘新区某某某街道'
					}
				]
			}
		},
		methods: {
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '暂未开通，敬请期待！',
									icon: 'none'
								});
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	.title{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		.u-icon{
			position: absolute;
			height: 100rpx;
			left: 20rpx;
		}
		text{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.main{
		position: relative;
		margin: 130rpx 36rpx 20rpx 36rpx;
		padding-bottom: 100rpx;
		.logo{
			position: absolute;
			width: 100%;
			top: -138rpx;
			text-align: center;
			image{
				width: 320rpx;
				height: 174rpx;
			}
		}
		.detail{
			padding: 30px 25rpx 10rpx 25rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.detailTitle{
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #283D82;
			}
			.detailName:nth-child(2){
				border: 0;
			}
			.detailName{
				margin: 20rpx;
				padding-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: #EAEAEA 1rpx solid;
				.detailNameLeft{
					.light{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #646566;
					}
					input{
						width: 350rpx;
					}
				}
			}
		}
		.jobAddress{
			margin-top: 20rpx;
			padding: 15rpx 45rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			border-radius: 20rpx;
			.jobAddressLeft{
				.light{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #646566;
				}
				input{
					width: 350rpx;
				}
			}
		}
		.buttom{
			margin: 20rpx 0;
			button{
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #53B9B2;
				border: #53B9B2;
				border-radius: 40rpx;
			}
		}
	}
}

</style>
